<template>
  <!-- 内置组件, 有一个is属性, 用于指定渲染哪个组件 -->
  <!-- 为了保持组件切换之前的状态, 我们需要使用内置组件(keep-alive)包裹 -->
  <keep-alive>
    <component :is="views[active]"></component>
  </keep-alive>

  <!-- 原结构 -->
  <!-- <div class="tab-bar">
    <div class="tab-bar-item">首页</div>
    <div class="tab-bar-item">分类</div>
    <div class="tab-bar-item">购物车</div>
    <div class="tab-bar-item">我的</div>
  </div> -->
  
<!-- 用组件改写 -->
<!-- 填充到两个子组件的默认插槽：标签名是什么就填充到哪个组件-->
<!-- 组件中的v-model由两个部分组成
● props: modelValue
● emit: update:modelValue -->
<!-- 让App和两个子组件解耦:子组件不依赖App自己计算索引 -->
  <!-- <tab-bar :modelValue="active" @update:modelValue="($event)=>active=$event"> -->
  <tab-bar v-model="active">
    <tab-bar-item icon="shouye">首页</tab-bar-item>
    <tab-bar-item icon="fenlei">分类</tab-bar-item>
    <tab-bar-item icon="gouwuche">购物车</tab-bar-item>
    <tab-bar-item icon="yonghu">我的</tab-bar-item>
  </tab-bar>
</template>

<script setup>
import { ref } from 'vue'
import TabBar from "./components/TabBar.vue";
import TabBarItem from "./components/TabBarItem.vue";

import HomeView from './views/HomeView.vue'
import CateView from './views/CateView.vue'
import CartView from './views/CartView.vue'
import UserView from './views/UserView.vue'
const active=ref(0)

const views = [HomeView, CateView, CartView, UserView]
</script>

<style>

</style>